<!--  -->
<template>
  <div class="container">
    <el-form ref="canalForm" :model="canalForm">
      <el-form ref="canalForm.option" :model="canalForm.option">
        <el-form-item label="可抢营业部：" prop="option">
          <span
            >允许配置的营业部的成员才能在企业微信群中进行抢单，可以为空。
          </span>
          <el-button
            class="btn-reset"
            type="warning"
            @click="resetSelect('canalForm.option')"
            >重置</el-button
          >
          <br />

          <el-select
            v-model="canalForm.option.dpmtOptions"
            placeholder="选择可抢营业部"
            class="grabSelect"
            ><el-option
              v-for="item in dpmtoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>

          <el-select
            v-model="canalForm.option.rateOptions"
            placeholder="佣金模板编号、费率"
            class="grabSelect2"
          >
            <el-option
              v-for="item in rateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item prop="option">
          <el-select
            v-model="canalForm.option.newDpmtOptions"
            placeholder="选择可抢营业部"
            class="grabSelect"
          >
            <el-option
              v-for="item in dpmtoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>

          <el-select
            v-model="canalForm.option.newRateOptions"
            placeholder="佣金模板编号、费率"
            class="grabSelect3"
          >
            <el-option
              v-for="item in rateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <!-- 新增选择器按钮 -->
          <el-button
            class="btn-pluss"
            type="primary"
            icon="el-icon-circle-plus"
            style="font-size: 28px"
            circle
            @click="btnAdd"
          />
        </el-form-item>
      </el-form>
      <el-form-item label="备注:" prop="remarks">
        <el-input
          v-model="canalForm.remarks"
          type="textarea"
          class="remarks"
          placeholder="请输入"
      /></el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          class="btn-auto"
          @click="btnSubmit('canalForm')"
          >保存</el-button
        >
        <el-button class="btn-auto" @click="resetDepartment('canalForm')">
          重置</el-button
        >
        <el-button class="btn-auto" @click="backOf"
          >返回</el-button
        > </el-form-item
      ><!--  -->
    </el-form>
  </div>
</template>

<script>
  export default {
    components: {}, // 组件注册
    data() {
      return {
        dpmtoptions: [
          { value: "dpmtKey", label: "国海总部" },
          {
            value: "dpmtKey1",
            label: "南湖分部",
          },
          {
            value: "dpmtKey2",
            label: "北湖分部",
          },
        ],
        rateOptions: [
          { value: "reteKey", label: "0.2" },
          {
            value: "reteKey1",
            label: "0.3",
          },
          {
            value: "reteKey2",
            label: "0.5",
          },
        ],
        // model
        canalForm: {
          remarks: "",
          option: {
            dpmtOptions: [
              {
                value: "",
              },
            ],
            rateOptions: [{ value: "" }],
            newDpmtOptions: [
              {
                value: "",
              },
            ],
            newRateOptions: [{ value: "" }],
          },
        },
      };
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    updated() {}, // 生命周期 - 更新之后
    destroyed() {}, // 生命周期 - 销毁完成
    activated() {},
    // 方法集合
    methods: {
      // 新增选择器按钮
      btnAdd() {
        console.log("addSelect");
      },
      // 全表单重置
      resetDepartment(formName) {
        this.$refs[formName].resetFields();
        console.log("resetCanalForm", [formName]);
      },
      // 重置选择
      resetSelect(formName) {
        console.log("resetSelect", [formName]);
        this.$refs[formName].resetFields();
      },
      // 点击返回
      backOf() {
        const params = this.canalForm;
        console.log(params);
      },
      // 点击保存
      btnSubmit(formName) {
        console.log(this.canalForm);
        // this.$refs[formName].validate(valid => {
        //     if (valid) {
        //         alert('sumbmit');
        //     }
        // });
      },
    }, // 如果页面有keep-alive缓存功能，这个函数会触发
  };
</script>
<style lang="scss" scoped>
  .container {
    .grabSelect {
      width: 218px;
      margin-left: 95px;
    }
    .grabSelect2 {
      width: 406px;
      margin-left: 27px;
    }
    .grabSelect3 {
      margin-left: 27px;
      width: 351px;
    }
    .remarks {
      width: 656px;
      margin-left: 50px;
      ::v-deep .el-textarea__inner {
        min-height: 69px !important;
      }
    }
    .btn-auto {
      width: 160px;
    }
    .btn-pluss {
      position: absolute;
      padding: 0px;
      border: 0px;
      margin: 5px 0px 0px 25px;
    }
    .btn-reset {
      padding: 5px;
      margin: 0px 0px 0px 190px;
    }
  }
</style>
